<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <template id="root">
        <div>
            <div class="title">
                <p class="category">手机</p>
                <a class="more">查看更多</a>
            </div>
            <hr>
            <div class="ad">
                <img src="img/ad1.png" alt="">
            </div>
            <div class="phone-card" v-for="phone in phoneList" :key="phone.id">
                <img :src="phone.image">
                <div class="details">
                <h3>{{phone.name}}</h3>
                <p>{{phone.description}}</p>
                <span>{{phone.price}}</span>
                <br><br>
                </div>
            </div>
        </div>
    </template>
    <script>
        const app = Vue.createApp({
            template: "#root",
            data() {
                return {
                    phoneList: [{
                            id: 1,
                            name: 'Redmi K50 电竞版',
                            description: '全线拉满的冷血旗舰',
                            image: 'img/phone1.png',
                            price: '3299元起'
                        }, {
                            id: 2,
                            name: 'Xiaomi 12 Pro',
                            description: '全新骁龙8 | 2K AMOLED屏幕',
                            image: 'img/phone2.png',
                            price: '4699元起'
                        }, {
                            id: 3,
                            name: 'Xiaomi 12',
                            description: '全新骁龙8 | 5000万主摄',
                            image: 'img/phone3.png',
                            price: '3699元起'
                        }, {
                            id: 4,
                            name: 'Xiaomi 12X',
                            description: '骁龙870 | 5000万主摄',
                            image: 'img/phone4.png',
                            price: '2999元起'
                        }, {
                            id: 5,
                            name: 'Xiaomi 11 青春活力版',
                            description: '轻薄5G，内外皆出彩',
                            image: 'img/phone5.png',
                            price: '1699元起'
                        }, {
                            id: 6,
                            name: 'Redmi Note 11 Pro系列',
                            description: '三星AMOLED高刷屏',
                            image: 'img/phone6.png',
                            price: '1799元起'
                        }, {
                            id: 7,
                            name: 'Redmi Note 11 5G',
                            description: '5000mAh大电量',
                            image: 'img/phone7.png',
                            price: '1199元起'
                        }, {
                            id: 8,
                            name: 'Redmi Note 11 4G',
                            description: '5000mAh大电量',
                            image: 'img/phone8.png',
                            price: '969元起'
                        },

                    ]
                }
            },
        })
        app.mount('#app')
    </script>
</body>

</html>